<template>
  <div class="information-container">
    <el-form ref="form" class="information-form" :model="form" :rules="rules" label-width="80px">
      <div class="title-container">
        <h3 class="title">
           完善商户资料
        </h3>
      </div>
      <el-form-item label="商户名称" prop="name">
        <el-col :span="12">
          <el-input tabindex="1" v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="商户简称" prop="shortName">
        <el-col :span="12">
          <el-input tabindex="2" v-model="form.shortName" />
        </el-col>
      </el-form-item>
      <el-form-item label="所在地" prop="areaId">
        <el-col :span="24">
          <Distpicker tabindex="3" :province="district.province" :city="district.city" :area="district.area" @province="selectProvince" @city="selectCity" @area="selectArea"></Distpicker>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-col :span="24">
          <el-input tabindex="4" v-model="form.address" />
        </el-col>
      </el-form-item>
      <el-form-item label="负责人"  prop="linkman">
        <el-col :span="12">
          <el-input tabindex="5" v-model="form.linkman" />
        </el-col>
      </el-form-item>
      <el-form-item label="办公电话"  prop="phone">
        <el-col :span="12">
          <el-input tabindex="6" v-model="form.phone" />
        </el-col>
      </el-form-item>
      <el-form-item label="备注">
        <el-col :span="24">
          <el-input tabindex="7" v-model="form.remark" />
        </el-col>
      </el-form-item>
      <el-button :loading="clicked" type="primary" style="width:20%;margin-left:40%;margin-top:30px" @click.native.prevent="submit('form')">
        完 成
      </el-button>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import { getInfo, save } from '@/api/sysMch'
  export default {
    filters: {

    },
    components: {
      Distpicker
    },
    data() {
      return {

        district: { province: 440000, city: '广州市', area: '海珠区' },

        clicked: false, // 按钮防双击
        topName: '',
        typeOneDisabled: false, // 公司类型是否禁用
        typeTwoDisabled: false, // 部门类型是否禁用
        form: {
          name: '',
          shortName: '',
          linkman: '',
          phone: '',
          remark: '',
          areaId: 440000,
          areaName: '广东省广州市海珠区',
          address: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          shortName: [
            { required: true, message: '请输入商户简称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          areaId: [
            { required: true, message: '请输入选择所在地', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      var _this = this;
      _this.clicked = true
      getInfo().then(response => {
        _this.clicked = false
        if (response.data!==null) {
          _this.form = response.data;
          _this.district.area = _this.form.areaId;
        }
      }).catch(error => {
        _this.clicked = false
      })
    },
    methods: {
      selectProvince(value) {
        this.district.province = value.value
        console.log(value);
      },
      selectCity(value) {
        this.district.city = value.value
        console.log(value);
      },
      selectArea(value) {
        this.district.area = value.value
        this.form.areaId=value.code;
        this.form.areaName=value.value;
        console.log(value);
      },
      submit(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            save(_this.form).then(response => {
              console.log(response)
              _this.clicked = false

                  _this.$router.push({
                    path: '/audit-status'
                  })


            }).catch(error => {
              _this.clicked = false

            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>


<style lang="scss">

  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $cursor: #000;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .information-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui style */
  .information-container {
    position: relative;

  }
</style>

<style lang="scss" scoped>

  $bg:#283443;
  $light_gray:#eee;

  .information-container {
    min-height: 100%;
    background-color: $bg;
    width: 100%;
    overflow: hidden;

    .information-form {
      position: relative;
      width: 820px;
      max-width: 100%;
      padding: 80px 35px 0;
      margin: 0 auto;
      overflow: hidden;
    }
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 20px auto;
        text-align: center;
        font-weight: bold;
      }

      .set-language {
        color: #fff;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0px;
        cursor: pointer;
      }
    }
  }
</style>
